<template>
  <div class="business-container" :style="{ height: `${listHeight}px`, width: `${listWidth}px` }">
    <div class="select">
      <el-select v-model="form.preferType" placeholder="请选择点位类型过滤" multiple ref="itemSelect2" clearable
        @change="handleFiltrate">
        <el-option v-for="item in positionType" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="filtrate">
      <el-input v-model="form.name" placeholder="请输入过滤关键字" @input="handleFiltrate"></el-input>
    </div>
    <div class="select">
      <el-select v-model="selectValue" @change="handleSelectValue($event)" placeholder="请选择模型绑定" ref="modelSelect">
        <el-option v-for="item in imgArr" :key="item.modelId" :label="item.modelName" :value="item.modelId">
        </el-option>
      </el-select>
    </div>
    <div class="tree-area" :style="{ height: `${listHeight - 80}px`, width: `${listWidth}px` }">
      <div :class="[
        'tree-item',
        selectedPosition && selectedPosition.posId === item.posId
          ? 'active'
          : '',
      ]" v-show="filteredPositionMsgArr.length > 0" v-for="(item, index) in filteredPositionMsgArr" :key="index"
        @click="handleSelectPosition(item)">
        <div class="item-info">
          <!-- :content="item.posName ? item.posName : '未知业务名称'" -->
          <!-- <el-tooltip class="item" effect="dark" placement="right-start"> -->
          <span>{{ item.posName ? item.posName : "未知业务名称" }}</span>
          <!-- <template #content>
              <span class="tooltip-content">{{
                item.posName ? item.posName : "未知业务名称"
                }}</span>
            </template>
</el-tooltip> -->
          <!-- <lampCom
            :text="item.posName ? item.posName : '未知业务名称'"
            :containerWidth="160"
            :speed="30"
          /> -->
        </div>
      </div>
      <div class="no-data" v-show="filteredPositionMsgArr.length === 0">
        <span>滤后无数据</span>
      </div>
    </div>
  </div>
</template>

<script>
import lampCom from "@/components/Lamp/index2.vue";
export default {
  name: "business-list",
  props: {
    imgArr: {
      type: Array,
      default: () => [],
    },
    selectedPosition: {
      type: Object,
      default: null,
    },
    filteredPositionMsgArr: {
      type: Array,
      default: () => [],
    },
    listHeight: {
      type: Number,
      default: 0,
    },
    listWidth: {
      type: [Number, String],
      default: 400,
    },
    positionType: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    lampCom,
  },
  data() {
    return {
      selectValue: "", // 业务列表下拉选中的值
      // filtrate: "", // 业务列表过滤关键字
      form: {
        preferType: [],
        name: "",
      },
    };
  },
  methods: {
    handleSelectValue(value) {
      this.$emit("handleSelectValue", value);
    },
    handleFiltrate(value) {
      this.$emit("handleFiltrate", this.form);
    },
    handleSelectPosition(item) {
      this.$emit("handleSelectPosition", item);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/index.scss";

.tooltip-content {
  font-size: 18px;
  font-weight: bold;
}

.business-container {
  // width: 380px;
  display: flex;
  flex-direction: column;

  .select {
    height: 36px;
    margin-bottom: 4px;

    .el-select {
      width: 100%;
    }
  }

  .filtrate {
    height: 36px;
    margin-bottom: 4px;
  }

  .tree-area {
    // width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    @include scrollBar2;

    .tree-item {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      border: 2px solid rgb(235, 238, 245);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
      padding: 10px;
      margin-bottom: 10px;
      cursor: pointer;

      .item-info {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;

        // justify-content: center;
        span {
          width: 100%;
          color: $themeColor;
          font-size: 18px;
          font-weight: bold;
          white-space: nowrap;
          /* 强制不换行 */
          overflow: hidden;
          /* 超出部分隐藏 */
          text-overflow: ellipsis;
          /* 显示省略号 */
          max-width: 100%;
          /* 限制最大宽度 */
          display: inline-block;
          /* 确保span可以应用宽度限制 */
        }
      }
    }

    .active {
      border: 2px solid #da1540;
    }

    .no-data {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40px;
      font-size: 20px;
      color: $themeColor;
    }
  }
}
</style>
